<template>
  <view class="container">
    <view class="head">
      <view class="head_left">
        课程
      </view>
    </view>
    <view class="main">
      <view class="main_box" v-for="(item,index) in list" :key="index">
        <view class="main_box_left">
          <image :src="item.image" mode=""></image>
          <view>
            <image
              :src="item.type == 1? '/static/image/tup.png': item.type=== 2? '/static/image/yingyue.png':'/static/image/shiping.png'"
              mode=""></image>
            <text>{{item.type == 1? '图文': item.type == 2? '音频': '视频'}}</text>
          </view>
        </view>
        <view class="main_box_content">
          <view class="main_box_content_head ellipsis">
            <view>
              {{item.title}}
            </view>
            <text> {{item.des}}</text>
          </view>
          <view class="main_box_content_footer">
            {{`已更新${item.episodes || 1}期`}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'

  const list = ref([])
  const data = [
    {
      image: '/static/taotaitupian/wangyesheji.png',
      type: 1,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/xianshangzhaoping.png',
      type: 2,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    },
  ]
  const getList = () => {
    list.value.push(...data)
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 20
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  onLoad(() => {
    getList()
  })
</script>
<style lang="less" scoped>
  .container {
    padding: 0 30rpx;
    box-sizing: border-box;

    .head {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      margin: 40rpx 0;
    }

    .main {
      &_box {
        border-bottom: 1px solid rgba(#000, .1);
        padding-bottom: 40rpx;
        margin-bottom: 40rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
          margin-bottom: 0;
        }

        &_left {
          position: relative;
          margin-right: 20rpx;
          border-radius: 8rpx;
          width: 240rpx;
          height: 160rpx;

          image {
            width: 240rpx;
            height: 160rpx;
            border-radius: 8rpx;
          }

          >view {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #343434;
            border-radius: 0rpx 10rpx 0rpx 10rpx;
            opacity: 0.6;
            color: #fff;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90rpx;
            height: 36rpx;

            image {
              width: 32rpx;
              height: 32rpx;
              margin-right: 2rpx;
            }
          }
        }

        &_content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          &_head {
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;

            text {
              font-weight: 400;
              font-size: 24rpx;
              color: #666666;
              margin-top: 18rpx;
            }
          }
          &_footer {
            font-size: 24rpx;
            color: #333333;
            margin-bottom: 8rpx;
          }
        }
      }
    }
  }
</style>